import { Form, Input, Switch } from 'antd'
import { useTranslation } from 'react-i18next'

import { createUserApi, getUserDetailApi, updateUserApi } from '@/apis/user'
import { SaveButton } from '@/components/button'
import FormContainer from '@/components/container/FormContainer'
import { useForm } from '@/hooks/useForm'

import RoleSelect from '../components/RoleSelect'

export default function UserForm() {
  const { t } = useTranslation()

  // 使用表单Hook
  const { title, isCreateMode, formProps, isLoading, handleSubmit } = useForm({
    key: 'user', // 与列表页的 key 保持一致，用于提交数据后刷新列表页数据
    getApiFn: getUserDetailApi, // 获取数据接口
    createApiFn: createUserApi, // 创建数据接口
    updateApiFn: updateUserApi, // 更新数据接口
    initialValues: {
      username: undefined,
      password: undefined,
      email: undefined,
      phoneNumber: undefined,
      isFrozen: false,
      roles: [],
    },
  })

  // 定义表单验证规则
  const rules = {
    username: [{ required: true, message: t('page.systemUser.rules.username') }],
    password: [{ required: true, message: t('page.systemUser.rules.password') }],
    email: [{ required: true, message: t('page.systemUser.rules.email') }],
    phoneNumber: [{ required: true, message: t('page.systemUser.rules.phone') }],
  }

  return (
    <FormContainer title={title}>
      <Form {...formProps} autoComplete="off">
        <Form.Item label={t('page.systemUser.username')} name="username" rules={rules.username}>
          <Input autoComplete="new-password" placeholder="请输入用户名" />
        </Form.Item>

        {isCreateMode && (
          <Form.Item label={t('page.systemUser.password')} name="password" rules={rules.password}>
            <Input.Password autoComplete="new-password" placeholder="请输入密码" />
          </Form.Item>
        )}

        <Form.Item label={'手机号'} name="phoneNumber" rules={rules.phoneNumber}>
          <Input autoComplete="new-password" placeholder="请输入手机号" />
        </Form.Item>

        <Form.Item label={t('page.systemUser.email')} name="email" rules={rules.email}>
          <Input autoComplete="new-password" placeholder="请输入邮箱" />
        </Form.Item>

        {!isCreateMode && (
          <Form.Item label={t('page.systemUser.isFrozen')} name="isFrozen" valuePropName="checked">
            <Switch />
          </Form.Item>
        )}

        <Form.Item wrapperCol={{ offset: 12, span: 8 }}>
          <SaveButton type="primary" loading={isLoading} onClick={handleSubmit} />
        </Form.Item>
      </Form>
    </FormContainer>
  )
}
